import React, { useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import { motion } from 'framer-motion';

const SpreadContainer = styled.div`
  min-height: 100vh;
  background: linear-gradient(135deg, #1a0a2e 0%, #0d0630 100%);
  color: white;
  padding: 20px;
`;

const Header = styled.h1`
  font-size: 2rem;
  margin-bottom: 30px;
  text-align: center;
  background: linear-gradient(to right, #9d4edd, #5a189a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
`;

const SpreadCategoryContainer = styled.div`
  max-width: 1200px;
  margin: 0 auto;
`;

const CategoryTitle = styled.h2`
  font-size: 1.5rem;
  margin: 30px 0 20px;
  color: #e0aaff;
  display: flex;
  align-items: center;
  gap: 10px;
`;

const LockIcon = styled.span`
  font-size: 1.2rem;
  color: #gold;
`;

const SpreadGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
`;

const SpreadCard = styled(motion.div)`
  background: rgba(90, 24, 154, 0.2);
  border-radius: 15px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(157, 78, 221, 0.3);
  cursor: ${(props) => props.locked ? 'not-allowed' : 'pointer'};
  opacity: ${(props) => props.locked ? 0.6 : 1};
  
  &:hover:not([locked]) {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(90, 24, 154, 0.4);
  }
`;

const SpreadHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
`;

const SpreadTitle = styled.h3`
  font-size: 1.3rem;
  color: #e0aaff;
  margin: 0;
`;

const CardCount = styled.span`
  background: rgba(224, 170, 255, 0.2);
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.9rem;
`;

const SpreadDescription = styled.p`
  color: #c77dff;
  margin-bottom: 15px;
  min-height: 60px;
`;

const PositionContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
`;

const PositionTag = styled.span`
  background: rgba(157, 78, 221, 0.3);
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
`;

const ActionButton = styled(motion.button)`
  padding: 15px 40px;
  font-size: 1.1rem;
  border: none;
  border-radius: 50px;
  background: linear-gradient(45deg, #9d4edd, #5a189a);
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(90, 24, 154, 0.3);
  margin: 30px auto;
  display: block;
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(90, 24, 154, 0.5);
  }
`;

const TarotSpread = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const { question, category } = location.state || { question: '', category: '' };
  
  const [selectedSpread, setSelectedSpread] = useState(null);

  // 牌阵数据
  const spreads = {
    basic: [
      {
        id: 'daily',
        name: '每日单张',
        cardCount: 1,
        description: '抽取一张牌，获得今日的能量指引和建议。',
        positions: ['今日主题'],
        locked: false
      },
      {
        id: 'three_cards',
        name: '三张牌阵',
        cardCount: 3,
        description: '探索过去、现在和未来，了解事情的发展脉络。',
        positions: ['过去', '现在', '未来'],
        locked: false
      }
    ],
    advanced: [
      {
        id: 'celtic_cross',
        name: '凯尔特十字',
        cardCount: 10,
        description: '最全面的牌阵，深入分析复杂情况的所有方面。',
        positions: ['现状', '挑战', '基础', '过去', '目标', '未来', '自我', '环境', '希望', '结果'],
        locked: true // 高级牌阵对免费用户锁定
      },
      {
        id: 'relationship',
        name: '关系洞察',
        cardCount: 7,
        description: '专门用于探索人际关系和情感连接的牌阵。',
        positions: ['你', '对方', '关系现状', '挑战', '吸引力', '未来', '建议'],
        locked: true // 高级牌阵对免费用户锁定
      }
    ]
  };

  const handleSpreadSelect = (spread) => {
    if (spread.locked) {
      // 这里应该提示用户升级到VIP
      alert('此牌阵仅对VIP用户开放，请升级以解锁更多功能。');
      return;
    }
    
    setSelectedSpread(spread);
  };

  const handleContinue = () => {
    if (!selectedSpread) {
      alert('请选择一个牌阵');
      return;
    }
    
    // 导航到抽牌页面，传递问题、领域和牌阵信息
    navigate('/tarot/draw', { 
      state: { 
        question: question,
        category: category,
        spread: selectedSpread
      }
    });
  };

  return (
    <SpreadContainer>
      <Header>选择牌阵</Header>
      
      <SpreadCategoryContainer>
        <CategoryTitle>基础牌阵</CategoryTitle>
        <SpreadGrid>
          {spreads.basic.map((spread) => (
            <SpreadCard
              key={spread.id}
              locked={spread.locked}
              selected={selectedSpread?.id === spread.id}
              whileHover={!spread.locked ? { y: -10 } : {}}
              whileTap={!spread.locked ? { scale: 0.98 } : {}}
              onClick={() => handleSpreadSelect(spread)}
              style={{
                border: selectedSpread?.id === spread.id ? '2px solid #e0aaff' : ''
              }}
            >
              <SpreadHeader>
                <SpreadTitle>{spread.name}</SpreadTitle>
                <CardCount>{spread.cardCount}张牌</CardCount>
              </SpreadHeader>
              <SpreadDescription>{spread.description}</SpreadDescription>
              <PositionContainer>
                {spread.positions.map((position, index) => (
                  <PositionTag key={index}>{position}</PositionTag>
                ))}
              </PositionContainer>
            </SpreadCard>
          ))}
        </SpreadGrid>
        
        <CategoryTitle>
          高级牌阵
          <LockIcon>🔒</LockIcon>
        </CategoryTitle>
        <SpreadGrid>
          {spreads.advanced.map((spread) => (
            <SpreadCard
              key={spread.id}
              locked={spread.locked}
              selected={selectedSpread?.id === spread.id}
              whileHover={!spread.locked ? { y: -10 } : {}}
              whileTap={!spread.locked ? { scale: 0.98 } : {}}
              onClick={() => handleSpreadSelect(spread)}
              style={{
                border: selectedSpread?.id === spread.id ? '2px solid #e0aaff' : ''
              }}
            >
              <SpreadHeader>
                <SpreadTitle>{spread.name}</SpreadTitle>
                <CardCount>{spread.cardCount}张牌</CardCount>
              </SpreadHeader>
              <SpreadDescription>{spread.description}</SpreadDescription>
              <PositionContainer>
                {spread.positions.map((position, index) => (
                  <PositionTag key={index}>{position}</PositionTag>
                ))}
              </PositionContainer>
            </SpreadCard>
          ))}
        </SpreadGrid>
      </SpreadCategoryContainer>
      
      <ActionButton
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        onClick={handleContinue}
      >
        开始抽牌
      </ActionButton>
    </SpreadContainer>
  );
};

export default TarotSpread;